<template>
    <div class="addMerchantBox" v-loading="loading">
        <el-form :model="data" ref="addStore" :rules="rules">

            <el-form-item label="商户分类" prop="store_type_id">
                <el-select @change="getClassData" style="width:300px" v-model="data.store_type_id" placeholder="请选择">
                    <el-option key="1" label="餐饮" value="1"></el-option>
                    <el-option key="2" label="商城" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商户分类" prop="classifity_id">
                <TreeSelect
                        noChildrenText="暂无下级分类"
                        noOptionsText="请选择商户类型"
                        noResultsText="请选择商户类型"
                        style="width: 300px; float: left"
                        :normalizer="normalizer"
                        v-model="data.classifity_id"
                        :options="classData"/>
            </el-form-item>

            <el-form-item label="商户名称" prop="name">
                <el-input
                        placeholder="请输入商户名称"
                        style="width:300px"
                        v-model="data.name">
                </el-input>
            </el-form-item>
            <el-form-item label="商户密码" prop="password">
                <el-input
                        placeholder="请输入商户密码"
                        style="width:300px"
                        v-model="data.password">
                </el-input>
            </el-form-item>

            <el-form-item label="商户手机号" prop="mobile">
                <el-input
                        placeholder="请输入商户手机号"
                        style="width:300px"
                        v-model="data.mobile">
                </el-input>
            </el-form-item>
        </el-form>


        <div>
            <el-button @click="submitFn('addStore')" type="primary">确认添加</el-button>
        </div>


    </div>

</template>

<script>
    import TreeSelect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        name: 'add-merchant',
        components: {TreeSelect},
        data() {
            return {
                loading: false,
                data: {
                    password: '',
                    mobile: '',
                    name: ''
                },
                rules: {
                    name: [{required: true, message: '请填写商户名称', trigger: 'blur'}],
                    password: [{required: true, message: '请填写商户密码', trigger: 'blur'}],
                    mobile: [{required: true, message: '请填写商户手机号码', trigger: 'blur'}],
                    classifity_id: [{required: true, message: '请选择商户分类', trigger: 'blur'}],
                    store_type_id: [{required: true, message: '请选择商户分类', trigger: 'blur'}]
                },
                classData: []
            }
        },
        methods: {
            submitFn(name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return;
                    }

                    this.data.token = localStorage.getItem('user_token');
                    this.loading = true;
                    this.$http.post('/web/add/store', this.data).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('添加成功');
                            this.data = {}
                        }
                        this.loading = false
                    }).catch(() => {
                        this.loading = false;
                    })
                })


            },

            getClassData(id) {
                this.loading = true;
                this.$http.post('/web/store/classify/list', {
                    token: localStorage.getItem('user_token'),
                    pageSize: 999,
                    type_id: id
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.classData = response.data.data;
                        this.data.classifity_id = ''
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },

            normalizer(node) {
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children,
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    @import './merchant-manage.scss';
</style>
